<template>
  <div class="movelibrary">
    <my-head title="移库出场" :isRightClick = "true"/>

    <mu-text-field v-show="isShowVin" v-model="vin" placeholder="VIN" ref="vin" class='input' @keyup.enter.native="getVin()"><i class="iconfont icon-saomiao" @click="scan('vin')"></i></mu-text-field>


    <mu-paper class="paper" :z-depth="2" v-show="isShowCard" >
        <div class="list-content">VIN ：<span>{{vin}}</span></div>
        <div class="list-content">车型：<span>{{carData.car}}</span><em class="space"></em>颜色：<span>{{carData.color}}</span></div>
        <div class="list-content">库位：<span class="library-position">{{carData.location}}</span></div>
    </mu-paper>

    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
  </div>
</template>

<script>
import myHead from '@/components/header'
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  name: 'movelibrary',
  components: {
    myHead, scanning
  },
  data () {
    return {
        scanMark: '',
        isScanning: false,
        vin: "",
        isShowVin: false,
        isShowCard: false,
        carData: {
            car: "",
            color: "",
            location: ""
        }
    }
  },
  methods: {
    closeing (val) {
      val ? this.isScanning = false : null;
    },
    childByValue (val) {
      if(val){
        if(val.split('&')[1] == 'vin'){
          this.vin = val.split('&')[0];
          this.getVin();
        }
      }
    },
    scan (txt) {
      this.scanMark = txt;
      this.isScanning = true;
    },
    getVin () {
        /* 发送post请求 */
        let data = Object.assign({},this.$store.state.user,{
            content: {
                vin: this.vin
            }
        });
        this.common.reqData(api.app('moveLibraryBunding'), data, res=>{
            console.log("移库", res.data);
            if(res.data.status == 200){
                // 提示
                this.Toast({
                    mask: true,
                    message: res.data.msg
                });
            }else if(res.data.status == 100){
                // 提示
                this.Toast.success({
                    duration: 1500,
                    mask: true,
                    message: "绑定成功"
                });
                this.vin = res.data.content.vin;
                this.carData.car = res.data.content.type;
                this.carData.color = res.data.content.color;
                this.carData.location = res.data.content.zone;
                this.isShowCard = true;
            }
        },err =>{
            console.log(err)
        });
    },
    oneSearch () {
        /* 发送post请求 */
        this.common.reqData(api.app('moveLibrary'), this.$store.state.user, res=>{
            console.log("移库", res.data);
            if(res.data.status == 100){
                if(res.data.content){
                    this.vin = res.data.content.vin;
                    this.carData.car = res.data.content.type;
                    this.carData.color = res.data.content.color;
                    this.carData.location = res.data.content.zone;
                    this.isShowCard = true;
                }else{
                    this.isShowVin = true;
                    this.isShowCard = false;
                    setTimeout(() => {
                        this.$refs.vin.$el.children[0].getElementsByTagName('input')[0].focus();
                        window.plus ? plus.key.hideSoftKeybord() : 0;
                    }, 50);
                }
            }
        },err =>{
            console.log(err)
        });
    }
  },
  mounted () {
    // 进入页面第一次请求
    this.oneSearch();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.movelibrary{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.input{
    display: block;
    margin: 15px auto;
    width: 85%;
}
.paper, .state, .msg{
    width: 85%;
    margin: 4em auto 0;
    padding: 1.5em 0;
}
.state, .msg{
    text-align: center;
    color: red;
    font-size: 1em;
}
.list-content{
    padding: 8px 20px;
}
.library-position{
    font-size: 2.2em;
    font-weight: bold;
    color: red;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.space{
    padding: 0 20px;
}
.btn{
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.btn .mu-raised-button{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
</style>
